<template>
  <div class="markdown-renderer">
    <div class="markdown-body" v-html="renderedContent"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, watchEffect } from 'vue'
import MarkdownIt from 'markdown-it'
// @ts-ignore
import mdHighlight from 'markdown-it-highlightjs'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

interface Props {
  content: string
  // 是否启用HTML标签解析
  html?: boolean
  // 是否自动转换链接
  linkify?: boolean
  // 是否启用排版优化
  typographer?: boolean
  // 是否启用代码高亮
  highlight?: boolean
  // 是否显示行号
  lineNumbers?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  content: '',
  html: true,
  linkify: true,
  typographer: true,
  highlight: true,
  lineNumbers: false
})

// 创建 markdown-it 实例
const md = new MarkdownIt({
  html: props.html,
  linkify: props.linkify,
  typographer: props.typographer,
  breaks: true, // 转换换行符为 <br>
})

// 添加代码高亮插件
if (props.highlight) {
  md.use(mdHighlight, {
    inline: true,
    auto: true,
    code: true
  })
}

// 自定义渲染规则：为表格添加样式
md.renderer.rules.table_open = () => '<table class="markdown-table">\n'

// 自定义渲染规则：为代码块添加行号
if (props.lineNumbers) {
  const fence = md.renderer.rules.fence!
  md.renderer.rules.fence = (tokens, idx, options, env, renderer) => {
    const token = tokens[idx]
    const code = token.content
    const lines = code.split('\n')
    const lineNumbersHtml = lines
      .map((_, index) => `<span class="line-number">${index + 1}</span>`)
      .join('')
    
    const originalHtml = fence(tokens, idx, options, env, renderer)
    return originalHtml.replace(
      '<pre>',
      `<div class="code-block-wrapper"><div class="line-numbers">${lineNumbersHtml}</div><pre>`
    ).replace('</pre>', '</pre></div>')
  }
}

// 计算渲染后的内容
const renderedContent = computed(() => {
  try {
    return md.render(props.content || '')
  } catch (error) {
    console.error('Markdown rendering error:', error)
    return '<p class="render-error">内容渲染失败</p>'
  }
})

// 监听内容变化，支持实时渲染
watchEffect(() => {
  // 这里可以添加滚动到底部的逻辑（如果需要）
  // 或者其他内容更新时的处理
})
</script>

<style scoped>
.markdown-renderer {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  word-wrap: break-word;
}

/* 暗色主题支持 */
:global(.dark) .markdown-body {
  color: #e0e0e0;
}

/* 标题样式 */
.markdown-body :deep(h1),
.markdown-body :deep(h2),
.markdown-body :deep(h3),
.markdown-body :deep(h4),
.markdown-body :deep(h5),
.markdown-body :deep(h6) {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body :deep(h1) {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:global(.dark) .markdown-body :deep(h1) {
  border-bottom-color: #30363d;
}

.markdown-body :deep(h2) {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:global(.dark) .markdown-body :deep(h2) {
  border-bottom-color: #30363d;
}

.markdown-body :deep(h3) {
  font-size: 1.25em;
}

/* 段落样式 */
.markdown-body :deep(p) {
  margin-top: 0;
  margin-bottom: 16px;
}

/* 列表样式 */
.markdown-body :deep(ul),
.markdown-body :deep(ol) {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body :deep(li) {
  margin-bottom: 4px;
}

/* 链接样式 */
.markdown-body :deep(a) {
  color: #0366d6;
  text-decoration: none;
}

.markdown-body :deep(a:hover) {
  text-decoration: underline;
}

:global(.dark) .markdown-body :deep(a) {
  color: #58a6ff;
}

/* 引用样式 */
.markdown-body :deep(blockquote) {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin: 16px 0;
}

:global(.dark) .markdown-body :deep(blockquote) {
  color: #8b949e;
  border-left-color: #30363d;
}

/* 代码样式 */
.markdown-body :deep(code) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

:global(.dark) .markdown-body :deep(code) {
  background-color: rgba(240, 246, 252, 0.15);
}

.markdown-body :deep(pre) {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 6px;
  margin: 16px 0;
}

:global(.dark) .markdown-body :deep(pre) {
  background-color: #161b22;
}

.markdown-body :deep(pre code) {
  padding: 0;
  margin: 0;
  font-size: 100%;
  background-color: transparent;
  border: 0;
}

/* 表格样式 */
.markdown-body :deep(.markdown-table) {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}

.markdown-body :deep(.markdown-table th),
.markdown-body :deep(.markdown-table td) {
  padding: 8px 12px;
  border: 1px solid #dfe2e5;
}

:global(.dark) .markdown-body :deep(.markdown-table th),
:global(.dark) .markdown-body :deep(.markdown-table td) {
  border-color: #30363d;
}

.markdown-body :deep(.markdown-table th) {
  background-color: #f6f8fa;
  font-weight: 600;
}

:global(.dark) .markdown-body :deep(.markdown-table th) {
  background-color: #161b22;
}

.markdown-body :deep(.markdown-table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

:global(.dark) .markdown-body :deep(.markdown-table tr:nth-child(2n)) {
  background-color: #0d1117;
}

/* 水平线样式 */
.markdown-body :deep(hr) {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

:global(.dark) .markdown-body :deep(hr) {
  background-color: #30363d;
}

/* 图片样式 */
.markdown-body :deep(img) {
  max-width: 100%;
  box-sizing: content-box;
  background-color: #fff;
}

:global(.dark) .markdown-body :deep(img) {
  background-color: transparent;
}

/* 行号样式（如果启用） */
.code-block-wrapper {
  position: relative;
  display: flex;
  margin: 16px 0;
}

.line-numbers {
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  background-color: #f0f0f0;
  border-radius: 6px 0 0 6px;
  font-size: 85%;
  line-height: 1.45;
  color: #666;
  user-select: none;
}

:global(.dark) .line-numbers {
  background-color: #1c2128;
  color: #8b949e;
}

.line-number {
  text-align: right;
  min-width: 2em;
}

.code-block-wrapper pre {
  flex: 1;
  margin: 0;
  border-radius: 0 6px 6px 0;
}

/* 错误提示样式 */
.render-error {
  color: #cf222e;
  padding: 12px;
  background-color: #ffebe9;
  border: 1px solid #ff8182;
  border-radius: 6px;
}

:global(.dark) .render-error {
  color: #f85149;
  background-color: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.4);
}

/* 强调文本样式 */
.markdown-body :deep(strong) {
  font-weight: 600;
}

.markdown-body :deep(em) {
  font-style: italic;
}

/* 任务列表样式 */
.markdown-body :deep(input[type="checkbox"]) {
  margin-right: 4px;
}

/* 删除线样式 */
.markdown-body :deep(del) {
  text-decoration: line-through;
}

/* 优化滚动条样式 */
.markdown-renderer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.markdown-renderer::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

:global(.dark) .markdown-renderer::-webkit-scrollbar-track {
  background: #21262d;
}

.markdown-renderer::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.markdown-renderer::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .markdown-body {
    font-size: 14px;
  }
  
  .markdown-body :deep(pre) {
    font-size: 12px;
  }
}
</style>